<template>
	<view>
		<bnn-loading :loading="isLoading"/>
		<view class="wrap" @click="show=true">			
			<u-field v-model="mobile" label="时间:" :disabled="true" placeholder="请选择日期" right-icon="calendar"></u-field>
			<u-calendar v-model="show" :mode="mode" @change="change"></u-calendar>
		</view>	
		<view class="card-body">
			<!-- 成交 -->
			<view class="card-table" v-if="type === 0">
				<view class="table-tr">
					<view class="table-th1" width="20%">成交时间</view>
					<view class="table-th2" width="35%">品种合约</view>
					<view class="table-th3" width="15%">类型</view>
					<view class="table-th4" width="10%">数量</view>
					<view class="table-th5" width="20%">价格</view>
				</view>
				<view v-for="(item, key) in moreData" :key="key" class="table-tr tr_bottom">
					<view class="table-td1" width="20%">{{item.date}}</view>
					<view class="table-td2" width="35%">{{item.qihuoname}}</view>
					<view class="table-td3" width="15%" v-if="item.o_c==0&&item.b_s==0"><text class="more_text" :class="item.b_s==item.o_c?'greenbackground':'redbackground'">卖跌</text></view>
					<view class="table-td3" width="15%" v-else-if="item.o_c==1&&item.b_s==0"><text class="more_text" :class="item.b_s==item.o_c?'greenbackground':'redbackground'">买涨</text></view>
					<view class="table-td3" width="15%" v-else-if="item.o_c==1&&item.b_s==1"><text class="more_text" :class="item.b_s==item.o_c?'greenbackground':'redbackground'">买跌</text></view>
					<view class="table-td3" width="15%" v-else><text class="more_text" :class="item.b_s==item.o_c?'greenbackground':'redbackground'">卖涨</text></view>
					<view class="table-td4" width="10%">{{item.lots}}</view>
					<view class="table-td5" width="20%">{{item.price}}</view>
				</view>
			</view>
			<!-- 平仓 -->
			<u-table class="card-table" v-if="type === 1">
				<u-tr class="table-tr">
					<u-th class="table-th close1" width="20%">开平日期</u-th>
					<u-th class="table-th close2" width="25%">品种合约</u-th>
					<u-th class="table-th close3" width="10%">类型</u-th>
					<u-th class="table-th close4" width="10%">数量</u-th>
					<u-th class="table-th close5" width="15%">开平价</u-th>
					<u-th class="table-th close6" width="20%">平仓盈亏</u-th>
				</u-tr>
				<u-tr v-for="(item, key) in moreData" :key="key" class="table-tr tr_bottom" style="height: 64px">
					<u-td class="table-td close1" width="20%"><div>{{item.open_date ? item.open_date : '-'}}<br/>——<br/>{{item.close_date ? item.close_date : '-'}}</div></u-td>
					<u-td class="table-td close2" width="25%"><div>{{item.qihuoname}}</div></u-td>
					<u-td class="table-td close3" width="10%" v-if="item.b_s=='买'"> <text class="text_back redbackground">买</text></u-td>
					<u-td class="table-td close3" width="10%" v-else><text class="text_back greenbackground">卖</text></u-td>
					<u-td class="table-td close4" width="10%"><div>{{item.positon}}</div></u-td>
					<u-td class="table-td close5" width="15%"><div>{{formatNum(item.open_price)}}<br/>——<br/>{{formatNum(item.trans_price)}}</div></u-td>
					<u-td class="table-td close6" width="20%"><div>{{formatNum(item.profit_loss)}}</div></u-td>
				</u-tr>
			</u-table>
			<u-loadmore :status="status" />
			<!-- <view class="more" v-if="moreData.length==0">
				暂无记录
			</view> -->
			<!-- <view class="more" v-else @click="moreFn">
				点击查看更多...
			</view> -->
		</view>
	</view>
</template>

<script>
	import {transactions, closeList} from '@/api/addons.js'
	export default {
		data() {
			return {
				type: 0,
				status: 'loadmore',
				id: '',
				page:1,
				limit:20,
				moreData:[],
				keyword:'',
				mobile:'',
				isLoading:true,
				startime:'',
				endtime:'',
				show: false,
				mode: 'range',
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
			}
		},
		onReachBottom() {
					// if(this.page >= 3) return ;
				this.status = 'loading';
					// this.page = ++ this.page;
					setTimeout(() => {
						this.moreFn()
					// 	this.list += 10;
					// 	if(this.page >= 3) this.status = 'nomore';
					// 	else this.status = 'loading';
					}, 2000)
					
			
		},
		onLoad(query) {
			this.id=query.id
			this.type= Number(query.type)
			uni.setNavigationBarTitle({
				title: this.type===1?"平仓记录":"成交记录"
			})
			this.moreFn()
		},
		methods: {
			formatNum(val) {
				if(val && isFinite(val) && !isNaN(val)) {
					return Number(Number(val).toFixed(2))
				}
				return '0.00'
			},
			moreFn(){
				const that = this
				let data={
					room:that.id,
					page:that.page,
					limit:that.limit,
					startday:that.startime,
					endday:that.endtime
				}
				const fn = (res) => {
					let num =res.data.length
					for(let i=0;i<num;i++){							
						that.moreData.push(res.data[i])
					}
					that.page+=1
					if(num==0){
						uni.showToast({
						    title: '没有更多了',
							icon:'none'
						});
						that.status = 'nomore';							
					}
				}
				if (that.type === 0) {
					that.reqTransactions(data, fn)
				} else {
					that.reqCloseList(data, fn)
				}
			},
			change(e) {
				const that = this
				that.startime=e.startDate
				that.endtime=e.endDate
				that.mobile=e.startDate+' 至 '+e.endDate
				that.page=1
				that.moreData=[]
				let data={
					room:that.id,
					page:that.page,
					limit:that.limit,
					startday:e.startDate,
					endday:e.endDate
				}
				const fn = (res) => {
					let num =res.data.length
					for(let i=0;i<num;i++){							
						that.moreData.push(res.data[i])
					}
					that.status = 'nomore';
					that.page+=1
					that.isLoading = false
				}
				if (that.type === 0) {
					that.reqTransactions(data, fn)
				} else {
					that.reqCloseList(data, fn)
				}
			},
			// 请求成交记录
			reqTransactions(data, callback) {
				transactions(data).then(res=>{
					if (res.code==200) {
						callback && callback(res)
					}
				})
			},
			// 请求平仓记录
			reqCloseList(data, callback) {
				closeList(data).then(res=> {
					if(res.code==200) {
						callback && callback(res)
					}
				})
			}
		}
	}
</script>

<style scoped>
	.more_text{
		height: 22px;
		color: #fff;
		border-radius: 2px;
		padding: 0 3px;
		width: 100%;
		/* width: 40px; */
	}
	.text_back{
		height: 22px;
		line-height: 22px;
		color: #fff;
		border-radius: 2px;
	}
	.redbackground{
		background-color: rgb(231, 76, 60) !important;
	}
	.greenbackground{
		background-color: rgb(68, 184, 94) !important;
	}
	.tr_bottom{
		border-bottom:1rpx solid #e8e8e8;
	}
	.card-table{
		border: none !important;
	}
	.table-tr{
		display: flex;
		height: 80rpx;
		line-height: 80rpx;
	}
	.table-th1{
		border: none !important;
		width:22%;
		text-align: center;
	}
	.table-th2{
		border: none !important;
		width:38%;
		text-align: center;
	}
	.table-th3{
		border: none !important;
		width:10%;
		text-align: center;
	}
	.table-th4{
		border: none !important;
		width:10%;
		text-align: center;
	}
	.table-th5{
		border: none !important;
		width:20%;
		text-align: center;
	}
	.table-td1{
		border: none !important;
		font-size: 14px;
		text-align: center;
		width: 22%;
	}
	.table-td2{
		border: none !important;
		font-size: 14px;
		text-align: center;
		width: 38%;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.table-td3{
		border: none !important;
		font-size: 14px;
		text-align: center;
		width: 10%;
	}
	.table-td4{
		border: none !important;
		font-size: 14px;
		text-align: center;
		width: 10%;
	}
	.table-td5{
		border: none !important;
		font-size: 14px;
		text-align: center;
		width: 20%;
	}
	.more{
		padding: 10px;
		text-align: center;
		color: #999999;
	}
	.wrap {
		padding: 24rpx;
	}

	.u-row {
		margin: 40rpx 0;
	}

	.demo-layout {
		height: 80rpx;
		border-radius: 8rpx;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}
	/deep/ .card-body{
		padding-bottom: 30rpx;
	}
	/deep/ .card-table{
		border: none !important;
		background-color: #F4F5F6 !important;
	}
	/deep/ .table-tr{
		height: 64rpx;
	}
	/deep/ .table-th{
		border: none !important;
		font-weight: 400;
	}
	/deep/ .table-td{
		border: none !important;
		line-height: 1;
		padding: 10px 3px;
		text-align: center;
	}
	
	.close1 {
		width: 20%;
		flex: 0 0 20%;
	}
	.close2 {
		width: 25%;
		flex: 0 0 25%;
	}
	.close3 {
		width: 10%;
		flex: 0 0 10%;
	}
	.close4 {
		width: 10%;
		flex: 0 0 10%;
	}
	.close5 {
		width: 25%;
		flex: 0 0 15%;
	}
	.close6 {
		width: 20%;
		flex: 0 0 20%;
	}
</style>
